<template>
  <div class="configure">
    <div class="header">
      <a-row>
        <a-col :span="20">
          <a-input-search v-model:value="diskName" placeholder="磁盘名称" class="input" @search="onSearch" />
        </a-col>
        <a-col :span="4">
          <a-button type="primary" shape="round" @click="openAddModal">
            <template #icon>
              <plus-outlined />
            </template>
            新增
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="content" >
      <a-card></a-card>

    </div>
    <a-modal v-model:visible="addModalVisible" title="Basic Modal" @ok="addDisk" @cancel="cancelAddDisk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>

</template>

<script lang="ts" setup>
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';

const diskName = ref<string>('');
const addModalVisible = ref<boolean>(false)
const onSearch = (value: string) => {
  console.log(value);
  console.log(diskName);
};
const openAddModal = ()=>{
  addModalVisible.value = true
}
const addDisk = ()=>{
  addModalVisible.value = false
}
const cancelAddDisk = ()=>{
  addModalVisible.value = false
}
</script>

<style lang="scss" scoped>
.configure {
  margin: 20px 8vw;
  background-color: #ffffff;

  .header {
    padding: 20px;
    border-bottom: 2px solid #F0F0F0;

    .input {
      width: 30%;
    }
  }
  .content{

  }
}


</style>